import React, {Component} from 'react'
import {
    Image,
    TouchableOpacity,
    Text,
    StyleSheet,
    View

} from 'react-native'
import HTMLView from 'react-native-htmlview'
import BaseItem from'./BaseItem'

export default class TrendingItem extends BaseItem {
    render() {
        const {projectModel} = this.props
        if (!projectModel.item) return null
        const description = '<p>' + projectModel.item.description + '</p>'
        return (
            <TouchableOpacity
                onPress={()=>this.onItemClick()}
            >
                <View style={styles.cellContainer}>
                    <Text style={styles.title}>
                        {projectModel.item.fullName}
                    </Text>
                    <HTMLView
                        value={description}
                        onLinkPress={(url) => {
                        }}
                        stylesheet={{
                            P: styles.description,
                            a: styles.description
                        }}
                    />
                    <Text style={styles.description}>
                        {projectModel.item.meta}
                    </Text>

                    <View style={styles.row}>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                            <Text>Built by:</Text>
                            {projectModel.item.contributors.map((res, i, arr) =>
                                <Image
                                    key={i}
                                    style={{width: 22, height: 22, margin: 2}}
                                    source={{uri: arr[i]}}
                                />)}
                        </View>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                            <Text>Star:</Text>
                            <Text>{projectModel.item.starCount}</Text>
                        </View>
                        {this._favoriteIcon()}
                    </View>
                </View>

            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    cellContainer: {
        backgroundColor: 'white',
        padding: 10,
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 3,
        borderColor: '#dddddd',
        borderWidth: 0.5,
        borderRadius: 2,
        shadowColor: 'gray', //IOS有效
        shadowOffset: {width: 0.5, height: 0.5},//IOS有效
        shadowOpacity: 0.4,//IOS有效
        shadowRadius: 1,//IOS有效
        elevation: 2, // Android有效
    },
    title: {
        fontSize: 16,
        marginBottom: 2,
        color: '#212121',
    },
    description: {
        fontSize: 14,
        marginBottom: 2,
        color: '#757575',
    }
})